<template>
  <view class="container">
    <date-select-view
      @change="dateChange"
      :defaultTime="daily"
      style="margin-left: 30rpx"
    ></date-select-view>
    <view class="top-view">
      <babyInfoCard
        :name="children.name"
        :gender="children.gender"
        :imgUrl="children.imgUrl"
        :month="children.month"
        :birthday="children.birthday"
      />
    </view>

    <u-tabs
      :list="tabList"
      :is-scroll="false"
      :current="current"
      @change="change"
      :active-color="'#333333'"
      :inactive-color="'#999999'"
    ></u-tabs>
    <scroll-view
      v-for="(tab, tabIndex) in tabList"
      class="body"
      v-show="tabIndex === current"
      :scroll-y="true"
    >
	<view v-if="saShow">
		<u-swipe-action
		  v-for="(item, index) in tab.list"
		  :show="item.show"
		  :index="index"
		  :key="item.id"
		  @click="click"
		  @open="open"
		  :options="options"
			:ref="'swipeAction' + index"
		>
		 <temperature
		    v-if="tabIndex === 0"
				 :state="true"
		    :record="item"
		    @itemClick="itemClick(item, tabIndex)"
		  ></temperature>
		  <food
				:state="true"
		    v-else-if="tabIndex === 1"
		    :record="item"
		    @itemClick="itemClick(item, tabIndex)"
		  ></food>
		  <defecation
						:state="true"
		    v-else-if="tabIndex === 2"
		    :record="item"
		    @itemClick="itemClick(item, tabIndex)"
		  ></defecation>
		  <sleep
		    v-else-if="tabIndex === 3"
		    :record="item"
						:state="true"
		    @itemClick="itemClick(item, tabIndex)"
		  ></sleep>
				<Schedule
						:state="true"
				  v-else-if="tabIndex === 4"
				  :record="item"
				  @itemClick="itemClick(item, tabIndex)"
				></Schedule>
		  <view v-else></view>
		</u-swipe-action>
	</view>

      <u-empty text="暂无数据" mode="data" :show="tab.list.length === 0" marginTop="325"></u-empty>
    </scroll-view>

    <fab @fabClick="fabClick" />
    <record-type-select ref="refRecordType" :children="children"></record-type-select>
  </view>
</template>

<script>
import {
  getTemperatureList,
  getFeedingList,
  getSleepList,
  getHandoverList,
  getPottyList,
  delTemperature,
  delFeeding,
  delPotty,
  delSleep,
  getMoreList,
  deleteMoreList
} from "@/api/record.js"
import { formatDateByTimestamp } from "@/utils/utils.js"
import babyInfoCard from "./components/baby-info-card.vue"
import Temperature from "./components/temperature.vue"
import Food from "./components/food.vue"
import Defecation from "./components/defecation.vue"
import Sleep from "./components/sleep.vue"
import Schedule from './components/schedule.vue'
import Fab from "@/components/fab.vue"
import RecordTypeSelect from "@/pages_sub/record/components/record-type-select.vue"
import DateSelectView from "@/components/date-select-view.vue"
import { mapState } from "vuex"
import { forEach } from "../../js_sdk/luch-request/luch-request/utils"
export default {
  components: {
    babyInfoCard,
    Temperature,
    Food,
    Defecation,
    Sleep,
    Fab,
    RecordTypeSelect,
    DateSelectView,
	Schedule
  },
  computed: {
    ...mapState({
      appTheme: state => state.app.appTheme
    }),

  },
  data() {
    return {
      tabList: [
        {
          name: "体温",
          list: [],
          f: getTemperatureList,
          d: delTemperature
        },
        {
          name: "饮食",
          list: [],
          f: getFeedingList,
          d: delFeeding
        },
        {
          name: "如厕",
          list: [],
          f: getPottyList,
          d: delPotty
        },
        {
          name: "睡眠",
          list: [],
          f: getSleepList,
          d: delSleep
        },
		{
		  name: "更多",
		  list: [],
          f: getMoreList,
          d: deleteMoreList
		}
      ],
      current: 0,

      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#adcd23"
          }
        }
      ],

      children: {},
      daily: "",
	  saShow:true
    }
  },
  onLoad(options) {
    console.log(options)
    this.children = options
    this.daily = formatDateByTimestamp(Date.now(), "yyyy/mm/dd")
  },
  onShow() {
    this.init()
  },
  methods: {
    init() {
      for (let index in this.tabList) {
        this.getData(this.tabList[index])
      }
    },
    dateChange(res) {
      console.log(res)
      this.daily = this.$u.timeFormat(res.timestamp, "yyyy/mm/dd")
      this.init()
    },
    change(index) {
      this.current = index
    },
    click(index, optionIndex) {
      let tab = this.tabList[this.current]
      let item = tab.list[index]
      const that = this
      if (optionIndex === 0) {
        uni.showModal({
          title: "提示",
          content: "确认删除该条记录吗？",
          success:async function (res) {
            if (res.confirm) {
               that.delData(item,index)
			   // that.$forceUpdate()
			   // console.log(this.tabList);
            } else {
              setTimeout(function () {
                tab.list.map((val, idx) => {
                  tab.list[idx].show = false
                })

              }, 500)
            }
          }
        })
      }
    },
	
	showFlag(index) {
		let list = this.tabList[this.current].list
		list[index].show = false
		list.map((val, idx) => {
			try {
				if (index != idx) list[idx].show = false
			} catch (error) {
				//TODO handle the exception
			}
		})
	
	
	},
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      let list = this.tabList[this.current].list
      console.log(list)
      list[index].show = true
      list.map((val, idx) => {
        if (index != idx) list[idx].show = false
      })
    },

    getData(item) {
      item.f(this.children.id, this.daily).then(res => {
        item.list = res.data
      })
    },

    delData(item, index) {
      let tab = this.tabList[this.current]
      uni.showLoading({})
      tab.d(this.children.id, item.id).then(async res => {
        console.log(res)
        uni.hideLoading()

		this.saShow = false
        tab.list.splice(index, 1)
		try {
			await this.showFlag(index)
		} catch (error) {
			//TODO handle the exception
		}
		this.saShow = true
      })
    },

    fabClick() {
      switch (this.current) {
        case 0:
          this.$refs.refRecordType.temperatureClick()
          return
        case 1:
          this.$refs.refRecordType.foodClick()
		      return
        case 2:
          this.$refs.refRecordType.defecationClick()
		      return
        case 3:
          this.$refs.refRecordType.sleepClick()
		      return
        case 4:
          this.$refs.refRecordType.suckleClick()
          return
        default:
          break
      }
    },

    itemClick(item, tabIndex) {
      if (tabIndex === 0) {
        this.$refs.refRecordType.temperatureClick({ recordId: item.id })
      } else if (tabIndex === 1) {
          this.$refs.refRecordType.foodClick({ recordId: item.id })
      } else if (tabIndex === 2) {
        this.$refs.refRecordType.defecationClick(item.diaper, { recordId: item.id })
      } else if (tabIndex === 3) {
        this.$refs.refRecordType.sleepClick({ recordId: item.id })
      } else if (tabIndex === 4) {
        this.$refs.refRecordType.suckleClick({ recordId: item.id })
      }
    }
  }
}
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: $app-page-bg-color;
}
.u-swipe-action {
	background: transparent !important;
}

.u-tab-bar {
	background-color: #adcc23 !important;
}

.u-tabs {
	background: transparent !important;
}
.container {
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;

  .top-view {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .body {
	  .box-content-f:last-child{
	    border: 0 !important;
	  }
  }
}
</style>
